<template>
    <el-dialog v-model="visible" title="详情信息">
        <div v-if="state.isList">
            <img v-for="( item, index ) in pic" :key="index" :src="item" alt=""
                style="width: 120px;height: 120px;margin: 0 4px;">
        </div>
        <div v-if="state.isList" class="ppps">
            <p>发布者：{{ createUser }}</p>
            <p>联系电话：{{ phone }}</p>
            <p>微信昵称：{{ state.userIds }}</p>
            <p>微信头像：<img style="width: 50px;height: 50px;" :src="state.wximg" alt=""></p>
            <p>发布类型：{{ publishType }}</p>
            <p>标题：{{ remark }}</p>
            <p>内容：{{ content }}</p>
            <p v-if="status == 1">拒绝原因：{{ state.cause }}</p>
            <p>状态：<el-tag type="success" v-if="status == 0">
                    通过
                </el-tag>
                <el-tag type="warning" v-if="status == 2">
                    待审核
                </el-tag>
                <el-tag type="danger" v-if="status == 1">
                    未通过
                </el-tag>
            </p>
            <p>


            </p>
        </div>
        <img v-if="!state.isList" :src="state.images" alt="" style="width: 120px;height: 120px;margin: 0 4px;">
        <div v-if="!state.isList" class="ppps">
            <p>姓名：{{ state.username }}</p>
            <p>昵称：{{ state.userId }}</p>
            <p>联系电话：{{ state.userPhone }}</p>
            <p>咨询内容：{{ state.remark }}</p>
            <p>价格：{{ state.oriPrice }}</p>
            <p>时间：{{ state.createTime }}</p>
            <div class="sply">来源商品：{{ state.prodName }}</div>
            <!-- <div v-html="state.htmls" style="margin: 0 auto;height: 400px;overflow: auto;"></div> -->
        </div>
        <template #footer>
            <div class="dialog-footer" v-if="status != '0' && state.isList">
                <el-button type="primary" @click="onEdit(0)">
                    通过
                </el-button>
                <el-button type="danger" @click="onEdit(3)">
                    拒绝
                </el-button>
            </div>
        </template>
        <el-dialog v-model="state.innerVisible" width="500" title="拒绝原因" append-to-body>
            <el-form :inline="true" :model="dataForm" style="margin-top: 6px;">
                <el-form-item label="拒绝原因:">
                    <el-input type="textarea" style="width: 380px;" v-model="dataForm.cause" placeholder="拒绝原因"
                        clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="margin-left: 354%;" @click="onEdit(1)">
                        确定
                    </el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'

// import { tr } from 'element-plus/es/locale/index.js';

const emit = defineEmits(['refreshDataList'])
const dataForm = ref({})
const visible = ref(false)
const createUser = ref('')
const phone = ref('')
const publishType = ref('')
const remark = ref('')
const content = ref('')
const status = ref('')
const pic = ref([])
const state = reactive({
    supplyId: '',
    isList: false,
    username: '',
    userPhone: '',
    remark: '',
    prodName: '',
    createTime: '',
    visibles: false,
    oriPrice: '',
    htmls: '',
    userId: '',
    userIds: '',
    images: '',
    wximg: '',
    innerVisible: false,
    cause: ''
})
const init = (obj) => {
    console.log(obj);
    if (obj.consultationId) {
        state.isList = false
        state.username = obj.userName
        state.userPhone = obj.userPhone
        state.remark = obj.remark
        state.createTime = obj.createTime
        state.userId = obj.userId
        state.prodName = obj.product.prodName
        state.oriPrice = obj.product.oriPrice
        state.htmls = obj.product.content
        state.images = obj.pic
    } else {
        state.isList = true
        createUser.value = obj.createUser
        phone.value = obj.phone
        publishType.value = obj.publishType
        remark.value = obj.remark
        status.value = obj.status
        pic.value = obj.pics
        state.supplyId = obj.supplyId
        state.userIds = obj.userId
        state.wximg = obj.vxPic
        state.cause = obj.cause
        content.value = obj.content
    }
    visible.value = true

}
defineExpose({ init })

const onEdit = (statu) => {
    if (statu == 0) {
        http({
            url: http.adornUrl('/supply/update'),
            method: 'post',
            data: { supplyId: state.supplyId, status: statu }
        }).then((res) => {
            visible.value = false
            emit('refreshDataList')
        })
    } else if (statu == 1) {
        if (dataForm.value.cause) {
            state.innerVisible = false
            http({
                url: http.adornUrl('/supply/update'),
                method: 'post',
                data: { supplyId: state.supplyId, status: statu, cause: dataForm.value.cause }
            }).then((res) => {
                visible.value = false
                emit('refreshDataList')
            })
        }
        else {
            ElMessage({
                message: '拒绝原因不能为空',
                type: 'warning',
            })
        }

    } else {
        state.innerVisible = true
        // http({
        //     url: http.adornUrl('/supply/update'),
        //     method: 'post',
        //     data: { supplyId: state.supplyId, status: statu }
        // }).then((res) => {
        //     visible.value = false
        //     emit('refreshDataList')
        // })
    }

}
</script>
<style lang="scss" scoped>
.ppps {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

p {
    width: 50%;
    font-size: 18px;
    padding: 10px 20px;
}

.sply {
    font-size: 18px;
    padding: 10px 20px;
}
</style>